<template>
	<view class="picker-black">
		<template v-if="type == 'salary' && _isShow">
			<u-picker class="language_picker" :show="_isShow" ref="uPicker" :columns="salaryColumns"  confirmColor="#BF8355" cancelColor="#38383D"
			 @close="_isShow= false" @cancel="_isShow=false" @change="changeHandler" @confirm="salaryConfirm"> </u-picker>
		</template>
		<template v-else-if="type == 'datetime' && _isShow">
			<u-datetime-picker :show="_isShow"
					v-model="_val"
					mode="datetime"
							:minDate="_minDate"
							:maxDate="_maxDate"
					  confirmColor="#BF8355" cancelColor="#38383D"
					  @close="_isShow= false" @cancel="_isShow= false" @confirm="pickerConfirm"
			></u-datetime-picker>
		</template>
		<template v-else-if="type == 'year-month' && _isShow">
			<u-datetime-picker :show="_isShow"
			                v-model="_val"
							:minDate="_minDate"
							:maxDate="_maxDate"
			                mode="year-month"
							  confirmColor="#BF8355" cancelColor="#38383D"
							  @close="_isShow= false" @cancel="_isShow= false" @confirm="pickerConfirm"
			        ></u-datetime-picker>
		</template>
		<template v-else-if="type == 'date' && _isShow">
			<u-datetime-picker :show="_isShow"
			                v-model="_val"
							:minDate="_minDate"
							:maxDate="_maxDate"
			                mode="date"
							  confirmColor="#BF8355" cancelColor="#38383D"
							  @close="_isShow= false" @cancel="_isShow= false" @confirm="pickerConfirm"
			        ></u-datetime-picker>
		</template>
		<template v-else-if="type == 'list' && _isShow">
			<u-picker :show="_isShow" :columns="list" :keyName="keyName" confirmColor="#BF8355" cancelColor="#38383D" 
			@close="_isShow= false" @cancel="_isShow= false" @change="pickerChange" @confirm="pickerConfirm"></u-picker>
		</template>		
	</view>
</template>

<script>
	export default {
		props:{
			isShow: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default: ()=>{
					return []
				}
			},
			keyName: {
				type: String,
				default: 'label'
			},
			type:{
				type: String,
				default: 'list' // salary | date | list
			},
			val: {
				type: [Number, String],
				default: ''
			},
			minDate: {
				type: Number,
				default: Number(new Date().getTime())
			},
			maxDate: {
				type: Number,
				default: Number(new Date().getTime())
			}
		},
		computed:{
			_isShow:{
				get(){
					return this.isShow
				},
				set(val){
					this.$emit('update:isShow',val)
				}
			},
			_val:{
				get(){
					return this.val
				},
				set(val){
					this.$emit('update:val',val)
				}
			},
			_minDate:{
				get() {
					return this.minDate
				},
				set(val) {
					this.$emit('update:minDate',val)
				}
			},
			_maxDate:{
				get() {
					return this.maxDate
				},
				set(val) {
					this.$emit('update:maxDate',val)
				}
			},
			_val:{
				get(){
					return this.val
				},
				set(val){
					this.$emit('update:val',val)
				}
			}
		},
		watch:{
			isShow:{
				handler(val){
					console.log(this.maxDate)
					console.log(this.minDate)
					if(val && this.type == 'salary'){
						this.setPicker()
					}
				},
				deep: true,
				immediate: true
			}
		},
		data() {
			return {
				salaryColumns:[
					[],
					[]
				],
				datetime: new Date().getTime(),
				// minDate: new Date().getTime()
			}
		},
		methods: {
			pickerChange(e){
				this.$emit('change',e)
			},
			pickerConfirm(e){
				this.$emit('confirm',e)
			},
			salaryConfirm(e) {
				let _result = e.value[0] + '-' + e.value[1];
				if (e.value[0] == '面议') {
					_result = e.value[0];
				}
				console.log(e)
				this.$emit('confirm',e)
			},
			setPicker() {
				const dbArray = ['面议']
				const _val = 250
				for (let k = 1; k <= _val; k++) {
					dbArray.push(k + '000');
				}
				this.salaryColumns[0] = dbArray
			},
			changeHandler(e) {
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				// console.log('选择:', e);
				switch (index) {
					case 0:
						picker.setColumnValues(1, []);
						break;
					default:
						let dbArray = [];
						let _val = e.indexs[0];
						if (_val <= 50) { //50或以下
							for (let k = _val + 1; k <= _val * 2; k++) {
								dbArray.push(k + '000');
							}
						} else { //50以上
							for (let j = _val + 10; j <= _val + 50 && j <= 260; j += 10) {
								dbArray.push(j + '000');
							};
						}
						picker.setColumnValues(1, dbArray);
						break;
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.picker-black /deep/.u-picker{background-color: var(--darkViewBgColor);}
	.picker-black /deep/.uni-picker-view-mask{ background: -webkit-linear-gradient(top,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6)),-webkit-linear-gradient(bottom,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6));
    background: linear-gradient(180deg,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6)),linear-gradient(0deg,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6));
    background-position: top,bottom;  background-size: 100% 102px;  background-repeat: no-repeat;}
	[data-theme="night-theme"]{
		.picker-black /deep/.uni-picker-view-mask{background:linear-gradient(180deg,hsla(225, 23%, 10%,.95),hsla(225, 23%, 10%,.6)),linear-gradient(0deg,hsla(225, 23%, 10%,.95),hsla(225, 23%, 10%,.6));
		background-position: top,bottom;  background-size: 100% 102px;  background-repeat: no-repeat;}
	}
	
	.picker-black /deep/.u-picker__view__column__item{color: #F7F9FF;}
	.picker-black /deep/.uni-picker-view-indicator:after,
	.picker-black /deep/.uni-picker-view-indicator:before{border-color: var(--backgroundDivisionColor);}
	.picker-black /deep/.u-popup__content{background-color: var(--darkViewBgColor);}
</style>
